<template>
    <basic-container>
        <div class="avue-crud">
            <el-form :inline="true" label-width="80px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="区域名称">
                            <el-input v-model="info.divisionName" placeholder="请输入区域全名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区域级别">
                            <el-select v-model="info.divisionLevel" placeholder="请选择区域级别">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button size="small" @click="reset()" icon="el-icon-delete">清空</el-button>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="searchData()">搜索
                        </el-button>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button size="small" v-if="permissions.sys_menu_add" icon="el-icon-plus" type="primary"
                               @click="addOrUpdateHandle(false)">
                        添加
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="loading"
                :data="menuList"
                row-key="id"
                :lazy="lazy"
                :load="load"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="divisionName" label="区域名称" align="left"></el-table-column>
                <el-table-column prop="divisionCode" label="区域编码" align="center"></el-table-column>
                <el-table-column prop="divisionLevel" label="区域级别" align="center">
                    <template slot-scope="scope">
                        <el-tag type="" v-if="scope.row.divisionLevel === '1'">省</el-tag>
                        <el-tag type="success" v-if="scope.row.divisionLevel === '2'">市</el-tag>
                        <el-tag type="info" v-if="scope.row.divisionLevel === '3'">县</el-tag>
                        <el-tag type="warning" v-if="scope.row.divisionLevel === '4'">镇/街道</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="text"
                            icon="el-icon-plus"
                            @click="addOrUpdateHandle(false,scope.row)"
                            v-if="permissions.division_add">添加
                        </el-button>
                        <el-button size="small"
                                   type="text"
                                   icon="el-icon-edit"
                                   @click="addOrUpdateHandle(true,scope.row)"
                                   v-if="permissions.division_edit">修改
                        </el-button>
                        <el-button
                            size="small"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-if="permissions.division_del">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>
        </div>
    </basic-container>
</template>

<script>
    import {getDict} from '~/utils'
    import {delObj, getDivision} from '@/admin/api/division'
    import TableForm from './division-form'
    import {mapGetters} from 'vuex'

    export default {
        name: "Menu",
        components: {TableForm},
        data() {
            return {
                options: [],
                addOrUpdateVisible: false,
                // 遮罩层
                loading: false,
                // 菜单表格树数据
                menuList: [],
                lazy: true,
                // 菜单树选项
                menuOptions: [],
                data: [],
                info: {
                    divisionName: '',
                    divisionLevel: ''
                }

            }
        },
        created() {
            this.getList("000000")
            this.options = getDict('DIVISION_LEVEL')
            setTimeout(()=>{
                console.log(12)
                console.log(this.permissions)
            },1000)
        },
        computed: {
            ...mapGetters(['permissions']),
        },
        methods: {
            load(tree, treeNode, resolve) {
                this.getOne(tree.divisionCode)

                setTimeout(() => {
                    resolve(this.data)
                }, 1000)
            },
            addOrUpdateHandle(isEdit, data) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(isEdit, data)
                })
            },

            getOne(id) {
                this.data = []
                getDivision({lazy: true, parentId: id}).then(response => {
                    this.data = response.data.data
                })
            },
            searchData() {
                this.loading = true
                getDivision({
                    lazy: true,
                    divisionName: this.info.divisionName,
                    divisionLevel: this.info.divisionLevel
                }).then(response => {
                    this.menuList = response.data.data
                    this.loading = false
                })
            },
            reset() {
                this.info = {}
            },
            getList(id = '000000', lazy = true) {
                this.loading = true
                this.menuList = []
                getDivision({lazy: lazy, parentId: id}).then(response => {
                    this.menuList = response.data.data
                    this.loading = false
                })
            },
            handleDelete(row) {
                this.$confirm('是否确认删除名称为"' + row.divisionName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delObj(row.id)
                }).then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
            }
        }
    }
</script>
